<template>
  <div>
    <el-card>
      <el-form
        :model="form"
        :rules="rules"
        style="margin-bottom: 10%"
        ref="form"
        label-width="100px"
        class="demo-ruleForm">
        <el-row>
          <el-col style="margin-left:10%" :span="8">
            <el-form-item label="工号" prop="id">
              <el-input v-model="form.id"></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="username">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="form.sex" size="medium">
                <el-radio v-for="(item, index) in sexOptions" :key="index" :label="item.value"
                          :disabled="item.disabled">{{item.label}}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="职务" prop="username">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="基本工资" prop="gongzi">
              <el-input v-model="form.gongzi"></el-input>
            </el-form-item>
            <el-form-item label="籍贯" prop="jiguan">
              <el-input v-model="form.jiguan"></el-input>
            </el-form-item>
            <el-form-item label="爱好" prop="aihao">
              <el-input v-model="form.aihao"></el-input>
            </el-form-item>
            <el-form-item label="个人简介" prop="jianjie">
              <el-input type="textarea" v-model="form.jianjie"></el-input>
            </el-form-item>
            <el-form-item label="教育经历" prop="jiaoyu">
              <el-input type="textarea" v-model="form.jiaoyu"></el-input>
            </el-form-item>

          </el-col>

          <el-col style="float: right;margin-right: 10%" :span="8">
            <el-form-item label="图片" prop="name">
              <!-- 图片上传部分 -->
              <!-- <div>
                 <img style="height: 80px;width: 80px;cursor:pointer "
                      :src="form.avatar+''"
                      alt=""/>
               </div>-->
              <el-upload
                action="#"
                list-type="picture-card"
                :auto-upload="false">
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{file}">
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url" alt=""
                  >
                  <span class="el-upload-list__item-actions">
                             <span
                               class="el-upload-list__item-preview"
                             >
                               <i class="el-icon-zoom-in"></i>
                             </span>
                             <span
                               class="el-upload-list__item-delete"
                             >
                               <i class="el-icon-download"></i>
                             </span>
                             <span
                               class="el-upload-list__item-delete"
                             >
                               <i class="el-icon-delete"></i>
                             </span>
                           </span>
                </div>
              </el-upload>
            </el-form-item>

            <el-form-item label="出生年月" prop="birth">
              <el-date-picker v-model="form.birth" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                              :style="{width: '100%'}" placeholder="出生年月" clearable=""></el-date-picker>
            </el-form-item>
            <el-form-item label="学位" prop="xueWei">
              <el-radio-group v-model="form.xueWei" size="medium">
                <el-radio v-for="(item, index) in xueOptions" :key="index" :label="item.value"
                          :disabled="item.disabled">{{item.label}}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="职级别" prop="dept">
              <el-radio-group v-model="form.dept" size="medium">
                <el-radio v-for="(item, index) in deptOptions" :key="index" :label="item.value"
                          :disabled="item.disabled">{{item.label}}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="是否党员" prop="isDang">
              <el-radio-group v-model="form.isDang" size="medium">
                <el-radio v-for="(item, index) in dangOptions" :key="index" :label="item.value"
                          :disabled="item.disabled">{{item.label}}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="曾居住省份" prop="remark">
              <el-button size="mini" icon="el-icon-search" @click="showDialog=true">查看详情</el-button>
            </el-form-item>
            <el-form-item label="工作经历" prop="work">
              <el-input type="textarea" v-model="form.work"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item style="float: right;margin-right: 10%;">
          <el-button @click="closeAddDialog">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-dialog
      :visible.sync="showDialog"
      :modal-append-to-body="false"
      @open="open"
      @close="close">
      <template>
        <el-transfer
          filterable
          :titles="['未拥有','已拥有']"
          :button-texts="['到左边', '到右边']"
          v-model="value"
          :data="data"
        ></el-transfer>
      </template>
      <span slot="footer" class="dialog-footer">
                    <el-button @click="close" class="el-icon-close">取消分配</el-button>
                    <el-button
                      ref="getFocus"
                      @click="doAssignRoles"
                      class="el-icon-check"
                    >确定分配</el-button>
                  </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'S4_1',

    data () {
      const generateData = _ => {
        const data = []
        for (let i = 1; i <= 15; i++) {
          data.push({
            key: i,
            label: `备选项 ${i}`,
            disabled: false
          })
        }
        return data
      }
      return {
        data: generateData(),
        oldValue: [1, 4],
        newValue: [],
        value: [],
        form: this.$route.query.id,
        showDialog: false,
        sexOptions: [{
          'label': '男',
          'value': 0
        }, {
          'label': '女',
          'value': 1
        }, {
          'label': '保密',
          'value': 2
        }],
        dangOptions: [{
          'label': '是',
          'value': 0
        }, {
          'label': '否',
          'value': 1
        }],
        deptOptions: [{
          'label': '科级',
          'value': 0
        }, {
          'label': '副处',
          'value': 1
        }, {
          'label': '处级',
          'value': 2
        }, {
          'label': '局级',
          'value': 3
        }],
        xueOptions: [{
          'label': '专科',
          'value': 0
        }, {
          'label': '本科',
          'value': 1
        }, {
          'label': '硕士',
          'value': 2
        }, {
          'label': '博士',
          'value': 3
        }],
        rules: {
          id: [{
            required: true,
            message: '请输入工号',
            trigger: 'blur'
          }],
          username: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }],
          dept: [{
            required: true,
            message: '请选择职级别',
            trigger: 'change'
          }],
          isDang: [{
            required: true,
            message: '请选择是否党员',
            trigger: 'blur'
          }],
          sex: [{
            required: true,
            message: '性别不能为空',
            trigger: 'change'
          }],
          jiguan: [{
            required: true,
            message: '请输入籍贯',
            trigger: 'blur'
          }],
          xueWei: [{
            required: true,
            message: '请选择学位',
            trigger: 'blur'
          }],
          birth: [{
            required: true,
            message: '请选择生日',
            trigger: 'change'
          }],
          aihao: [{
            required: true,
            message: '请输入爱好',
            trigger: 'blur'
          }],
          gongzi: [{
            required: true,
            message: '请输入工资',
            trigger: 'blur'
          }],
          jiaoyu: [{
            required: true,
            message: '请输入教育经历',
            trigger: 'blur'
          }],
          work: [{
            required: true,
            message: '请输入工作经历',
            trigger: 'blur'
          }],
          jianjie: [{
            required: true,
            message: '请输入个人简介',
            trigger: 'blur'
          }],
        },
      }
    },
    created () {

    },
    methods: {
      open () {
        this.value = this.oldValue
        // 弹框焦点默认在确认键
        this.$nextTick(() => {
          this.$refs.getFocus.$el.focus()
        })
      },
      close () {
        this.showDialog = false
      },
      doAssignRoles () {
        this.newValue = this.oldValue = this.value
        this.msgSuccess('修改成功')
        this.close()
      },
      submitForm () {
        this.$refs['form'].validate(valid => {
          if (valid) {
            this.msgSuccess('修改成功')
          }
        })
      },

      closeAddDialog () {
        this.$router.go(-1)
      }

    }
  }
</script>

<style scoped>

</style>
